<template>
  <div class="container">
    <div class="error">
      <h1>404</h1>
      <h2>error</h2>
      <p>Ruh-roh, something just isn't right... Time to paw through your logs and get down and dirty in your
        stack-trace;)</p>
    </div>
    <div class="stack-container">
      <div class="card-container" v-for="(cardData, index) in cardDataList" :key="index">
        <div class="perspec" :style="{ '--spreaddist': cardData.spreaddist + 'px', '--scaledist': cardData.scaledist, '--vertdist': cardData.vertdist + 'px' }">
          <div class="card">
            <div class="writing">
              <div class="topbar">
                <div class="red"></div>
                <div class="yellow"></div>
                <div class="green"></div>
              </div>
              <div class="code">
                <ul></ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import '@/assets/error.css'
// 定义卡片数据
const cardDataList = ref([
  { spreaddist: 125, scaledist: 0.75, vertdist: -25 },
  { spreaddist: 100, scaledist: 0.8, vertdist: -20 },
  { spreaddist: 75, scaledist: 0.85, vertdist: -15 },
  { spreaddist: 50, scaledist: 0.9, vertdist: -10 },
  { spreaddist: 25, scaledist: 0.95, vertdist: -5 },
  { spreaddist: 0, scaledist: 1, vertdist: 0 }
]);

onMounted(() => {
  const stackContainer = document.querySelector('.stack-container');
  const cardNodes = document.querySelectorAll('.card-container');
  const perspecNodes = document.querySelectorAll('.perspec');
  let counter = cardNodes.length;

  //function to generate random number
  function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  //after tilt animation, fire the explode animation
  cardNodes.forEach((cardNode) => {
    const card = cardNode.querySelector('.card');
    card.addEventListener('animationend', function () {
      perspecNodes.forEach(function (elem, index) {
        elem.classList.add('explode');
      });
    });
  });

//after explode animation do a bunch of stuff
  perspecNodes.forEach((perspec) => {
    perspec.addEventListener('animationend', function (e) {
      if (e.animationName === 'explode') {
        cardNodes.forEach(function (elem, index) {

          //add hover animation class
          elem.classList.add('pokeup');

          //add event listner to throw card on click
          elem.addEventListener('click', function () {
            let updown = [800, -800]
            let randomY = updown[Math.floor(Math.random() * updown.length)];
            let randomX = Math.floor(Math.random() * 1000) - 1000;
            elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
            elem.style.transition = "transform 1s ease, opacity 2s";
            elem.style.opacity = "0";
            counter--;
            if (counter === 0) {
              stackContainer.style.width = "0";
              stackContainer.style.height = "0";
            }
          });

          // 假设最后2张卡片是底部区域
          const bottomCardCount = 2;
          let numLines = randomIntFromInterval(5, 6);
          if (index >= cardNodes.length - bottomCardCount) {
            // 底部卡片生成更少的代码行，甚至可以设为0
            numLines = 2;
          }

          //loop through the lines and add them to the DOM
          for (let index2 = 0; index2 < numLines; index2++) {
            let lineLength = randomIntFromInterval(25, 97);
            var node = document.createElement("li");
            node.classList.add('node-' + index2);
            elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
            //draw lines of code 1 by 1
            if (index2 == 0) {
              elem.querySelector('.code ul .node-' + index2).classList.add('writeLine');
            } else {
              elem.querySelector('.code ul .node-' + (index2 - 1)).addEventListener('animationend', function (e) {
                elem.querySelector('.code ul .node-' + index2).classList.add('writeLine');
              });
            }
          }
        });
      }
    });
  });
});
</script>
